// pages/detail-search/index.js
import {
  getSearchHot,
  getSerachSuggest,
  getSearchResult
} from "../../../service/api_search"
import {
  debounce,
  stringToNodes
} from "../../../utils/index"

const debounceGetSerachSuggest = debounce(getSerachSuggest, 800)

Page({

  /**
   * 页面的初始数据
   */
  data: {
    hotKeywords: [],
    suggestSongs: [],
    suggestSongsNodes: [],
    resultSongs: [],
    searchValue: ""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取热门搜索数据
    this.getPageData()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    this.data.resultSongs = []
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  // 多个网络请求 封装函数
  getPageData: function () {
    getSearchHot().then(res => {
      this.setData({
        hotKeywords: res.result.hots
      })
    })
  },

  // 搜索事件输入处理
  handleSearchChange: function (event) {
    // 1.获取输入的关键字
    const searchValue = event.detail
    // 2.保存关键字（有没有值，都需要绑定，如果用户删除完，也是需要绑定）
    this.setData({
      searchValue
    })
    // 3.判断关键字为空字符的处理逻辑
    // BUG处理，当输入内容为空时，防抖函数也必须停止
    if (!searchValue.length) {
      this.setData({
        suggestSongs: [],
        resultSongs: []
      })
      debounceGetSerachSuggest.cancel()
      return
    }
    // 4.根据关键字进行搜索
    debounceGetSerachSuggest(searchValue).then(res => {
      // 不建议在此处理搜索清空，还发送问题，因为请求还是发出去了，只是拒绝了接收
      // 这里涉及到闭包问题，不能直接获取 searchValue，需要从data中获取
      // if (!this.data.searchValue.length) return
      
      // 1.获取到建议的关键字
      const suggestSongs = res.result.allMatch
      this.setData({
        suggestSongs
      })
      // 如果没有关键字，就不需要再转了
      if(!suggestSongs) return
      // 2.转成node节点
      const suggestKeywords = suggestSongs.map(item => item.keyword)
      console.log(suggestKeywords);
      const suggestSongsNodes = []
      for (const keyword of suggestKeywords) {
        const nodes = stringToNodes(keyword, searchValue)
        suggestSongsNodes.push(nodes)
      }
      this.setData({
        suggestSongsNodes
      })
    })
  },
  // 搜索事件点击搜索处理
  handleSearchAction: function () {
    const searchValue = this.data.searchValue
    // 历史搜索，在此保存一下searchValue 到数组中
    wx.setStorageSync('searchValue', searchValue)
    getSearchResult(searchValue).then(res => {
      this.setData({
        resultSongs: res.result.songs
      })
    })
  },
  // 点击推荐&tag进行搜索（合并处理逻辑）
  handleKeywordItemClick: function (event) {
    // 1.获取点击的关键字，这里通过自定义数据传[index]获取
    const keyword = event.currentTarget.dataset.keyword

    // 2.将关键字设置到searchValue中
    this.setData({
      searchValue: keyword
    })
    // 3.发送网络请求(与上面请求一致，可直接调用上面方法)
    this.handleSearchAction()
  },

  // 点击推荐进行搜索（重复逻辑-已弃用，做合并处理）
  handleSuggestItemClick: function (event) {
    // 1.获取点击的关键字，这里通过自定义数据传[index]获取
    const index = event.currentTarget.dataset.index
    const keyword = this.data.suggestSongs[index].keyword

    // 2.将关键字设置到searchValue中
    this.setData({
      searchValue: keyword
    })
    // 3.发送网络请求(与上面请求一致，可直接调用上面方法)
    // getSearchResult(keyword).then(res => {
    //   this.setData({
    //     resultSongs: res.result.songs
    //   })
    // })
    this.handleSearchAction()
  },
  // 点击tag进行搜索（重复逻辑-已弃用，做合并处理）
  handleTagItemClick: function (event) {
    const keyword = event.currentTarget.dataset.keyword
    this.setData({
      searchValue: keyword
    })
    this.handleSearchAction()
  }
})